<template>
    <view v-if="userInfo.nickName || isShowContent">
        <carHeader :navigationBarStyle="{ iconText: shopInfo.shopName }"></carHeader>
        <view class="page flex-col">
            <!-- 公共组件-每个页面必须引入 -->
            <view class="group_1 flex-col">
                <view class="block_1 flex-col">
                    <view class="section_1 flex-col">
                        <view class="section_2 flex-col">
                            <view class="section_3 flex-row" @click="headerShow = false">
                                <view class="single-avatar_1 flex-col">
                                    <image :src="shopInfo.shopLogo" class="label_av" referrerpolicy="no-referrer" />
                                </view>
                                <text class="text_1"></text>
                                <view class="group_2 flex-col">
                                    <view class="image-text_1 flex-row justify-between">
                                        <image
                                            class="label_2"
                                            referrerpolicy="no-referrer"
                                            src="/static/icon/home/icon_liulan@2x.png"
                                        />
                                        <text class="text-group_1">{{ shopInfo.shopPageView }}</text>
                                    </view>
                                       

                                    <button @click="test" class="button_1 flex-col">
                                        <text class="text_2">申请成为分销商</text>
                                    </button>
                                </view>
                            </view>
                            <view @click="showShopDrwer" class="section_4box">
                                <div class="section_4 flex-col"></div>
                                <view class="infoBox" v-show="headerShow">
                                    <view class="tabs">
                                        <u-tabs
                                            :activeStyle="{
                                              color: '#333',
                                              fontWeight:'500',
                                              fontSize: '14px',
                                            }"
                                            :current="shopCurrent"
                                            :inactiveStyle="{
                                              color: '#666',
                                              fontSize: '14px',
                                            }"
                                            :list="orderTabs"
                                            :scrollable="false"
                                            @click="changeTabs"
                                            itemStyle="padding-left: 15px; padding-right: 15px; height: 48px;width: 31%;"
                                            lineColor="#FB625D"
                                            lineWidth="60"
                                        ></u-tabs>
                                    </view>
                                    <view class="content">
                                        <view class="content-cq" v-if="state == 0">
                                          <img class="imgsss" src="/static/icon/home/pic_qidai.png" alt="" >
                                          <view class="qdaitext">敬请期待</view>
                                        </view>
                                        <view class="content-c" v-if="state == 1">
                                            <view class="coupons-title">优惠券</view>
                                            <template v-for="cu in shopInfo.coupons">
                                                 <view class="coupons-list">
                                                <view class="coupons-list-t">
                                                    <view class="left">
                                                        <text class="fu">￥</text>
                                                        <text class="am">{{cu.couponContent}}</text>
                                                    </view>
                                                    <view class="right">
                                                        <view class="right-t">
                                                            <view class="fac">发出</view>
                                                            <view class="linq" @click="takeCoupon(cu.shopCouponId)">领取</view>
                                                        </view>

                                                        <view class="right-m">
                                                            <text class="mk">满减门槛</text>
                                                            <template v-if="cu.threshold">
                                                              <text class="ky" style="margin-left: 32rpx;">满</text>
                                                            <text class="am">￥{{cu.threshold}}</text>
                                                            <text class="ky">可用</text>
                                                            </template>
                                                             <template v-else>
                                                              <text class="ky" style="margin-left: 32rpx;">无门槛</text>
                                                            </template>
                                                        </view>
                                                        <view class="right-b">
                                                            <view class="yxxq">有效期</view>
                                                            <view class="date">
                                                                <view>{{cu.effectiveStart}}</view>
                                                                <view>{{cu.effectiveEnd}}</view>
                                                            </view>
                                                        </view>
                                                    </view>
                                                </view>
                                                <view class="guz" v-show="cu.shopCouponId == gzShowId">
                                                  <view class="gzitem">
                                                    <view class="gzitem-t">限领数量</view>
                                                    <view class="gzitem-c">{{cu.stockNumber}}</view>
                                                  </view>
                                                   <view class="gzitem" style="margin: 29rpx 0;">
                                                    <view class="gzitem-t">支付方式</view>
                                                    <view class="gzitem-c">{{cu.paymentMode == 1 ? '微信支付' : cu.paymentMode == 4 ?'线下支付' : '余额支付'}}</view>
                                                  </view>
                                                   <view class="gzitem">
                                                    <view class="gzitem-t">使用范围</view>
                                                    <view class="gzitem-c">{{cu.applyType == 1 ? '全部商品': cu.applyType == 2 ? '指定商品可用' : '指定商品不可用'}}</view>
                                                  </view>
                                                </view>
                                                <view class="coupons-list-b" @click.stop="gzShowRun(cu.shopCouponId)">
                                                    <text class="gc">优惠规则</text>
                                                    <view style="margin-left: 10rpx">
                                                        <u-icon color="#999999" :name="cu.shopCouponId == gzShowId ? 'arrow-up': 'arrow-down'" size="14"></u-icon>
                                                    </view>
                                                </view>
                                            </view>
                                            </template>
                                         
                                            <view class="ch" v-show="!gzShowId">
                                                <view class="titleee">
                                                    <view class="titleee-t">充值优惠</view>
                                                    <view class="chbtn">充值</view>
                                                </view>
                                                <view class="tag">
                                                  <view class="tag-l">
                                                    ￥100
                                                </view>
                                                <view class="tag-r">
                                                  送￥2
                                                </view>
                                                </view>
                                            </view>
                                        </view>
                                        <view class="content-c" v-if="state == 2">
                                            <view class="sinfo">
                                                <text class="t">地址</text>
                                                <text class="c">{{ shopInfo.shopAdress }}</text>
                                            </view>
                                            <view class="sinfo" style="margin-top: 24rpx;">
                                                <text class="t">简介</text>
                                                <text class="c">{{ shopInfo.shopName }}</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view @click.stop="headerShow = false" class="bottom">
                                        <view class="black"></view>
                                    </view>
                                </view>
                            </view>
                            <view class="tag_1 flex-col">
                                <text class="text_3">超级分销</text>
                            </view>
                        </view>

                        <view class="section_5 flex-col">
                            <view class="group_3 flex-row justify-between">
                                <view class="block_3" @click="toSearch">
                                    <u-search :showAction="false" placeholder="请输入" shape="square" v-model="keyword"></u-search>
                                </view>
                                <view class="block_4">
                                    <image
                                        class="block_4img"
                                        referrerpolicy="no-referrer"
                                        src="/static/icon/home/icon_zhanshi@2x.png"
                                    />
                                </view>
                            </view>
                            <view class="group_4 flex-row">
                                <view class="block_5 flex-col justify-between">
                                    <view class="text-wrapper_1 flex-col">
                                        <template v-for="(item, index) in muList">
                                            <view
                                                :class="nowShopGroupId === item.shopGroupId ? 'view_mu_act' : ''"
                                                :key="item.shopGroupId"
                                                @click="muClick(item.shopGroupId, index, 1)"
                                                class="view_mu"
                                                v-if="!item.shopGroupChildVos.length"
                                            >{{ item.groupName }}</view>
                                            <view
                                                :class="openmuId === item.shopGroupId ? 'view_mu_secondary_open' : ''"
                                                @click="setMuopid(item.shopGroupId, item)"
                                                class="view_mu_secondary"
                                                v-else
                                            >
                                                <view
                                                    :class="openmuId === item.shopGroupId ? 'view_mu_t_open' : ''"
                                                    class="view_mu_t"
                                                >{{ item.groupName }}</view>
                                                <template v-if="openmuId === item.shopGroupId">
                                                    <view
                                                        :class="nowShopGroupId === ch.shopGroupId ? 'view_mu_act' : ''"
                                                        :key="ch.shopGroupId"
                                                        @click.stop="muClick(ch.shopGroupId, idx, 2)"
                                                        class="view_mu2"
                                                        v-for="(ch, idx) in item.shopGroupChildVos"
                                                    >{{ ch.groupName }}</view>
                                                </template>
                                            </view>
                                        </template>
                                    </view>
                                </view>
                                <view class="flex-row ovy">
                                    <scroll-view
                                        :scroll-top="scrollTop"
                                        @scrolltolower="lower"
                                        @scrolltoupper="upper"
                                        class="scroll-Y"
                                        scroll-y="true"
                                    >
                                        <view class="block_6">
                                            <view
                                                @click="pushProductDetails(goods)"
                                                class="block_7 flex-row"
                                                v-for="goods in goodsList"
                                            >
                                                <view class="image-text_3 flex-col justify-between">
                                                    <view class="group_5 flex-col">
                                                        <image
                                                            :src="goods.image"
                                                            class="group_5_image"
                                                            referrerpolicy="no-referrer"
                                                        />
                                                    </view>
                                                    <view class="text-group_3 flex-col justify-between">
                                                        <text class="text_13">{{ goods.productName }}</text>
                                                        <text class="text_14">{{ goods.price }}</text>
                                                    </view>
                                                </view>
                                                <text class="text_15">￥</text>
                                                <image
                                                    @click.stop="addshowRun(goods)"
                                                    class="label_5"
                                                    referrerpolicy="no-referrer"
                                                    src="/static/icon/home/icon_tianjia@2x.png"
                                                />
                                            </view>
                                            <u-loadmore :nomoreText="statusText" :status="status" v-if="false" />
                                            <view class="block_empty">
                                                <u-empty mode="data" v-if="!goodsList || !goodsList.length"></u-empty>
                                            </view>
                                        </view>
                                    </scroll-view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="box_7" v-show="!headerShow">
                <view class="text-wrapper_2">
                    <text class="paragraph_3">改名分享</text>
                </view>
            </view>

            <view class="image-wrapper_2" v-show="!headerShow">
                <button open-type="share" style="background: none;" type="default">
                    <image class="label_6" referrerpolicy="no-referrer" src="/static/icon/home/icon_fenxiang@2x.png" />
                </button>

                <image
                    @click="callSelect"
                    class="label_7"
                    referrerpolicy="no-referrer"
                    src="/static/icon/home/icon_dianhua@2x.png"
                />
            </view>
            <!-- <u-action-sheet
                :actions="list"
                :closeOnClickOverlay="true"
                :safeAreaInsetBottom="true"
                :show="showCall"
                @close="showCall = false"
                @select="callSelect"
                cancelText="取消"
            ></u-action-sheet> -->

            <u-popup :closeOnClickOverlay="true" :show="addshow" @close="close">
                <view class="addbox">
                    <view class="info">
                        <view class="le">
                            <image :src="tempGoodsData.images[0]" class="leimg" />
                        </view>
                        <view class="ri">
                            <view class="name">{{ tempGoodsData.productName }}</view>
                            <view class="price">
                                <text class="price-c">￥</text>
                                {{ tempGoodsData.price }}
                            </view>
                        </view>
                    </view>
                    <view class="names" v-if="tempGoodsData.skuType === 2">
                        <view class="names-list" v-for="list in tempGoodsData.names">
                            <view class="names-title">{{ list.skuName }}</view>
                            <view class="names-item-box">
                                <view
                                    :class="valueCodess[list.nameCode] == item.valueCode ? 'names-item-act' : ''"
                                    @click="selectValuecode(list.nameCode, item.valueCode)"
                                    class="names-item"
                                    v-for="item in list.values"
                                >{{ item.skuValue }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="ops-box">
                        <view class="ops-title">数量</view>
                        <view class="ops-number">
                            <u-number-box v-model="addCarNumber"></u-number-box>
                        </view>
                    </view>
                    <view class="btns">
                        <view @click="addCarRun" class="btn">加入购物车</view>
                        <view @click="addshow = false" class="close">
                            <u-icon color="#333333" name="close-circle" size="18"></u-icon>
                        </view>
                    </view>
                </view>
            </u-popup>
        </view>

        <z-navigation></z-navigation>
    </view>
    <view class="getpage" v-else>
        <view class="title1">授权以下个人信息后查看</view>
        <view class="title2">
            <text>
                <u-icon color="#666666" name="checkmark-circle" size="16"></u-icon>
            </text>
            <text style="margin-left:15rpx;">头像、昵称、地区及性别</text>
        </view>
        <button @click="getUserinfo" class="button_info">
            <text class="text1">
                <u-icon color="#ffffff" name="weixin-fill" size="16"></u-icon>
            </text>
            <text class="text">微信登录</text>
        </button>
    </view>
</template>
<script>
import $http from "@/config/requestConfig";
import { mapState, mapMutations } from "vuex";
import store from "@/store/index.js";
import { getTokenByCode } from "@/config/login";
import coupons from '../../components/coupons/coupons.vue';
export default {
    components: { coupons },
    data() {
        return {
            constants: {},
            userInfo: {},
            list: [
                {
                    name: "",
                    disabled: true,
                },
                {
                    name: "拨打",
                },
            ],
            showCall: false,
            muList: [],
            scrollTop: 0,
            goodsList: [],
            orderTabs: [
                { name: "店长推荐" },
                { name: "优惠券/充值" },
                { name: "商家信息" },
            ],
            addshow: false,
            headerShow: false,
            nowShopGroupId: "",
            shopId: "",
            status: "nomore",
            statusText: "已加载全部数据",
            muidx: 0,
            page: 1,
            tempGoodsData: {},
            shopInfo: {},
            openmuId: null,
            gzShowId: null,
            goodsTotal: 0,
            state: 0,
            pageSize: 10,
            addSkuid: null,
            shopCurrent: null,
            addCarNumber: 1,
            valueCodess: {}, // 存放规格参数
            isShowContent: false,
            gzShow: false,
        };
    },
    onLoad(ops) {
		console.log(ops);
		this.goodsList = []
        this.shopId = ops.shopId || 187;
        const wxinfo = uni.getStorageSync("wxInfo");
        if (wxinfo) {
            this.userInfo = wxinfo;
            this.initGetData();
        }
        uni.$on("homeAuthorShow", (res) => {
            console.log(123123123, res);
            this.isShowContent = res.show;
            this.shopId = res.shopId;
            this.goodsList = [];
            this.initGetData();
            uni.$off("homeAuthorShow");
        });
    },
    onShow() {
        console.log(123123123);
    },
    onShareAppMessage(res) {
        // if (res.from === 'button') {// 来自页面内分享按钮
        //   console.log(res.target)
        // }
        return {
            title: this.shopInfo.shopName,
            path: "/pages/home/home?shopId=" + this.shopId,
        };
    },
    methods: {
        getUserinfo() {
            uni.getUserProfile({
                desc: "用以获取用户昵称、头像等",
                success: (res) => {
                    console.log(res.userInfo);
                    this.userInfo = res.userInfo;
                    uni.setStorageSync("wxInfo", res.userInfo);
                    this.initGetData();
                },
            });
        },
        async initGetData() {
            await getTokenByCode();
            await this.getShopInfo(this.shopId);
            await this.getData(this.shopId);
			await this.getCart();
			await this.saveOrUpdate();
        },
        async getShopInfo(id) {
            const res = await $http.get("shop/getIndex", {
                shopId: id,
            });
            console.log(res);
            this.shopInfo = res;
            this.list[0].name = res.chargePersonPhone;
            uni.setStorageSync("shopInfo", res);
        },
        /**
         * 获取菜单
         */
        getData(shopId) {
            $http
                .get("group/queryList", {
                    isMenu: 1,
                    shopId: shopId,
                })
                .then((res) => {
                    this.muList = res;
                    if (res[0]) {
                        if (res[0].isMenu) {
                            //有二级
                            this.openmuId = res[0].shopGroupId;
                            this.nowShopGroupId =
                                res[0].shopGroupChildVos[0].shopGroupId;
                        } else {
                            this.nowShopGroupId = res[0]
                                ? res[0].shopGroupId
                                : "";
                            this.shopId = res[0] ? res[0].shopId : "";
                        }
                    }
                    this.getGoodsData();
                });
        },
        /**
         * 上拉加载数据
         */
        upper: function (e) {
            // console.log(e);
            // this.page = 1;
            // this.goodsList = [];
            // this.getGoodsData();
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        lower(e) {
            if (this.goodsTotal > this.goodsList.length) {
                this.page += 1;
                this.getGoodsData();
            }
        },
        // 获取商品数据
        getGoodsData() {
            $http
                .get("product/queryList", {
                    shopId: this.shopId,
                    shopGroupId: this.nowShopGroupId,
                    page: this.page,
                    pageSize: this.pageSize,
                })
                .then((res) => {
                    console.log(res);
                    this.goodsTotal = res.total;
                    this.goodsList = this.goodsList.concat(res.list);
                });
        },
        /**
         * 菜单点击
         */
        muClick(shopGroupId, index, type) {
            console.log(shopGroupId);
            this.nowShopGroupId = shopGroupId;
            this.muidx = index;
            if (type === 1) {
                this.openmuId = null;
            }
            this.initGetGoodsData();
        },
        /**
         * 一级菜单展开
         */
        setMuopid(id, item) {
            this.openmuId = id;
            this.nowShopGroupId = item.shopGroupChildVos[0].shopGroupId;
            this.initGetGoodsData();
        },
        initGetGoodsData() {
            this.page = 1;
            this.goodsList = [];
            this.getGoodsData();
        },
        close() {
            this.addshow = false;
        },
        /**
         * 加入购物车抽屉
         */
        addshowRun(item) {
            this.addshow = true;
            this.addSkuid = item.skuId;
            this.addCarNumber = 1;
            $http
                .get("product/getById", {
                    shopId: item.shopId,
                    productId: item.productId,
                    skuId: item.skuId,
                })
                .then((res) => {
                    console.log(res);
                    this.tempGoodsData = res;
                    if (res.skuType !== 1) {
                        this.dispSpac(res);
                    } else {
                    }
                });
        },
        // 默认spac值
        dispSpac(data) {
            this.valueCodess = {};
            for (const some of data.names) {
                this.valueCodess[some.nameCode] = some.values[0].valueCode;
            }
            console.log(this.valueCodess);
        },
        // 购物车列表
        async getCart() {
            const shopInfo = uni.getStorageSync("shopInfo");
            await this.$http
                .get("cart/getCart", {
                    shopId: shopInfo.shopId,
                })
                .then((res) => {
                    const data = res;
                    let count = 0;
                    data.forEach((item, index) => {
                        item.skus.forEach((skuItem, skuIndex) => {
                            count = count + skuItem.number;
                        });
                    });
                    uni.$emit('cartCount', count)
					uni.$on('need',()=>{
						uni.$emit('cartCount', count)
					})
                });
        },
        /**
         * 加入购物车请求
         */
        addCarRun() {
            const params = {
                skuId: this.getSkuidBycode(),
                number: this.addCarNumber,
            };
            $http.post("cart/addCart", params).then((res) => {
                if (res) {
                    console.log(res);
                    if (res) {
                        uni.showToast({
                            title: "加入购物车成功",
                        });
                        this.getCart();
                        this.addshow = false;
                    }
                } else {
                }
            });
        },
        // 选择规格
        selectValuecode(key, value) {
            console.log(key);
            console.log(value);
            this.valueCodess[key] = value;
            console.log(this.valueCodess);
            this.$forceUpdate();
        },
        /**
         * 根据所选规格获取skuid
         */
        getSkuidBycode() {
            if (this.tempGoodsData.skuType === 1) {
                //单规格
                return this.tempGoodsData.skuId;
            }
            const temp = [];
            for (const key in this.valueCodess) {
                if (Object.hasOwnProperty.call(this.valueCodess, key)) {
                    const value = this.valueCodess[key];
                    temp.push(value);
                }
            }
            const code = temp.toString();
            return this.tempGoodsData.map[code].skuId;
        },
        setmuStyle(idx, item) {
            debugger;
            // 在当前item找到选中的id的index 然后他的-1设上圆角 +1设下圆角
            let seidx = item.find(
                (some) => some.shopGroupId === this.nowShopGroupId
            );
            if (seidx) {
                if (idx === seidx - 1) {
                    return {
                        "border-radius": "0px 28rpx 0px 0px",
                    };
                }
                if (idx === seidx + 1) {
                    return {
                        "border-radius": "0px 0px 28rpx 0px",
                        "border-bottom": "1px solid rgba(153, 153, 153, 0.3)",
                    };
                }
            }
        },
        callSelect() {
            uni.makePhoneCall({
                phoneNumber: this.shopInfo.chargePersonPhone,
            });
        },
        showShopDrwer() {
            this.shopCurrent = 0;
            this.gzShowId = null;
            this.headerShow = true;
        },
        headerShowClose() {
            this.headerShow = false;
        },
        gzShowRun(shopCouponId) {
          if(this.gzShowId == shopCouponId) {
            this.gzShowId = null
          }else{
            this.gzShowId = shopCouponId
          }
        },
        async saveOrUpdate() {
            const params = {
                shopId: this.shopId,
                isTop: 0,
            };
            await $http
                .post("userShop/visit/saveOrUpdate", params)
                .then((res) => {}).catch(res => {
					console.log(res.errMsg);
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					});
			});
        },
        changeTabs(e) {
            console.log(e);
            this.state = e.index;
            // this.page = 0
            // this.list = []
            // this.getAll().then(res => {
            // 	this.setOrderTabs()
            // 	this.orderTabs[this.state].name = this.orderTabs[this.state].name + `(${this.total})`
            // })
        },
        pushProductDetails(good) {
            uni.navigateTo({
                url:
                    "/pages/home/productDetails?productId=" + good.productId + "&shopId=" + good.shopId + "&skuId=" + good.skuId,
            });
        },
        getCoupons () {
          $http.get("coupon/getCoupons", params)
          .then((res) => {
            console.log(res);
          });
        },
        toSearch() {
            uni.navigateTo({ url:"/pages/search/search" });
        },
        takeCoupon(id) {
          const params = {
            "couponCode": "",
            // "couponId": id,
            "shopCouponId": id,
            "shopId": this.shopId,
            "source": 1,
            "useCredit": 0
          }
          $http.post("coupon/takeCoupon", params)
          .then((res) => {
            console.log(res);
            if(res) {
               uni.showToast({
                  title: "领取成功",
              });
            }
          }).catch(res => {
					console.log(res.errMsg);
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					});
			});
        }
    },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.page {
    height: calc(100vh - 150rpx);
    width: 750rpx;
    overflow: hidden;
}

.group_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 6245rpx;
}

.block_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 750rpx;
}

.section_1 {
    background-color: rgba(245, 246, 250, 1);
    z-index: 4;
    position: relative;
    width: 750rpx;
}

.section_2 {
    box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(51, 51, 51, 0.12);
    background-color: rgba(255, 255, 255, 1);
    z-index: 6;
    position: relative;
    width: 747rpx;
}

.image_1 {
    z-index: 86;
    width: 710rpx;
    height: 19rpx;
    margin: 11rpx 0 0 20rpx;
}

.section_3 {
    width: 703rpx;
    margin: 0rpx 0 0 35rpx;
}

.single-avatar_1 {
    box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(51, 51, 51, 0.12);
    border-radius: 50%;
    height: 140rpx;
    // border: 18rpx solid rgba(255, 255, 255, 1);
    width: 140rpx;
}

.label_av {
    border-radius: 50%;
    height: 140rpx;
    width: 140rpx;
}

.box_1 {
    background-color: rgba(234, 150, 149, 1);
    border-radius: 50%;
    width: 104rpx;
    height: 104rpx;
    margin: 18rpx 0 0 18rpx;
}

.text_1 {
    width: 186rpx;
    height: 36rpx;
    color: rgba(49, 49, 49, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 3rpx 0 0 34rpx;
}

.group_2 {
    width: 210rpx;
    height: 197rpx;
    margin-left: 133rpx;
}

.applet-top-bar_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    height: 60rpx;
    margin-left: 12rpx;
    width: 180rpx;
}

.block_2 {
    border-radius: 30rpx;
    width: 180rpx;
    height: 60rpx;
    border: 1rpx solid rgba(226, 226, 226, 1);
}

.box_2 {
    background-color: rgba(33, 33, 33, 1);
    border-radius: 50%;
    width: 8rpx;
    height: 8rpx;
    margin: 27rpx 0 0 25rpx;
}

.box_3 {
    background-color: rgba(33, 33, 33, 1);
    border-radius: 50%;
    width: 13rpx;
    height: 13rpx;
    margin: 24rpx 0 0 4rpx;
}

.box_4 {
    background-color: rgba(33, 33, 33, 1);
    border-radius: 50%;
    width: 8rpx;
    height: 8rpx;
    margin: 27rpx 0 0 4rpx;
}

.box_5 {
    width: 1rpx;
    height: 43rpx;
    border: 1rpx solid rgba(226, 226, 226, 1);
    margin: 9rpx 0 0 28rpx;
}

.label_1 {
    width: 34rpx;
    height: 34rpx;
    margin: 13rpx 26rpx 0 29rpx;
}

.image-text_1 {
    width: 99rpx;
    margin: 40rpx 0 0 56rpx;
    align-items: center;
}

.label_2 {
    width: 29rpx;
    height: 21rpx;
}

.text-group_1 {
    width: 60rpx;
    color: rgba(231, 108, 100, 1);
    font-size: 28rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
}

.button_1 {
    background-color: rgba(230, 110, 99, 1);
    border-radius: 12rpx;
    height: 50rpx;
    margin-top: 20rpx;
    width: 210rpx;
}

.text_2 {
    width: 177rpx;
    height: 25rpx;
    color: rgba(255, 254, 254, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 13rpx 0 0 16rpx;
}
.section_4box {
    width: 100%;
    height: 20rpx;
    position: relative;
}
.section_4 {
    background-color: rgba(222, 225, 234, 1);
    border-radius: 4rpx;
    z-index: 12;
    width: 60rpx;
    height: 8rpx;
    margin: 1rpx 0 15rpx 345rpx;
}

.tag_1 {
    box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(235, 109, 95, 0.12);
    background-color: rgba(230, 110, 99, 1);
    border-radius: 8rpx;
    z-index: 11;
    height: 50rpx;
    width: 134rpx;
    position: absolute;
    left: 37rpx;
    top: 125rpx;
}

.text_3 {
    width: 106rpx;
    height: 25rpx;
    color: rgba(255, 254, 254, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 12rpx 0 0 14rpx;
}

.section_5 {
    width: 750rpx;
    margin-bottom: 1rpx;
}

.group_3 {
    background-color: rgba(255, 255, 255, 1);
    width: 748rpx;
    height: 110rpx;
    margin-left: 2rpx;
}

.block_3 {
    width: 585rpx;
    height: 70rpx;
    margin: 16rpx 0 0 28rpx;
}

.search_1 {
    background-color: rgba(247, 248, 250, 1);
    width: 585rpx;
    height: 70rpx;
}

.image-text_2 {
    width: 243rpx;
    height: 29rpx;
    margin: 24rpx 0 0 22rpx;
}

.label_3 {
    width: 27rpx;
    height: 27rpx;
    margin-top: 2rpx;
}

.text-group_2 {
    width: 202rpx;
    height: 27rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
}

.label_4 {
    width: 41rpx;
    height: 40rpx;
    margin-top: 15rpx;
}

.block_4 {
    // display: flex;
    // align-items: center;
    margin-right: 30rpx;
    margin-top: 26rpx;
}

.block_4img {
    width: 40rpx;
    height: 40rpx;
}

.group_4 {
    width: 750rpx;
    margin: 15rpx 0 1rpx 0;
    height: calc(100vh - 270px);
}

.block_5 {
    width: 200rpx;
    height: 100%;
    overflow-y: auto;
    background: #fff;
}

.text_4 {
    width: 105rpx;
    height: 26rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin-left: 28rpx;
}

.text-wrapper_1 {
    background: #f5f6fa;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
}

.view_mu {
    width: 100%;
    height: 76rpx;
    color: #666666;
    font-size: 26rpx;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(102, 102, 102, 1);
    background: #fff;
    border-top: 1px solid rgba(153, 153, 153, 0.3);
}

.view_mu2 {
    width: 100%;
    height: 76rpx;
    color: #666666;
    font-size: 26rpx;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(102, 102, 102, 1);
    background: #fff;
}

.view_mu:last-child {
    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
}

.view_mu_t {
    width: 100%;
    height: 65rpx;
    color: #666666;
    font-size: 26rpx;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.view_mu_t_open {
    color: #eb6d5f;
    box-shadow: 0px 2rpx 6px 0px rgba(51, 51, 51, 0.14);
    margin-bottom: 2rpx;
}

.view_mu_secondary {
    width: 100%;
    color: #666666;
    font-size: 26rpx;
    align-items: center;
    color: rgba(102, 102, 102, 1);
    border-top: 1px solid rgba(153, 153, 153, 0.3);
}

.view_mu_secondary .view_mu_t:first-child {
    border-top: none;
}

.view_mu_secondary_open {
    border-left: 4rpx solid #eb6d5f;
}

.view_mu_act {
    background: #f5f6fa;
    border-top: none;
}

.view_mu_act + .view_mu {
    border-radius: 0px 28rpx 0px 0px;
}

.brr {
    border-radius: 0px 28rpx 0px 0px;
}

.brb {
    border-radius: 0px 0px 28rpx 0px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
}

.text_5 {
    width: 132rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 33rpx 0 0 29rpx;
}

.text_6 {
    width: 106rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 53rpx 0 0 28rpx;
}

.text_7 {
    width: 106rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 52rpx 0 0 28rpx;
}

.text_8 {
    width: 105rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 51rpx 0 0 29rpx;
}

.paragraph_1 {
    width: 133rpx;
    height: 61rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    line-height: 36rpx;
    margin: 48rpx 0 0 29rpx;
}

.text_9 {
    width: 132rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 53rpx 0 0 29rpx;
}

.text_10 {
    width: 106rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 54rpx 0 0 28rpx;
}

.text_11 {
    width: 105rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 47rpx 0 0 29rpx;
}

.text_12 {
    width: 105rpx;
    height: 24rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 54rpx 0 0 29rpx;
}

.paragraph_2 {
    width: 134rpx;
    height: 61rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    text-align: left;
    line-height: 36rpx;
    margin: 53rpx 0 44rpx 28rpx;
}

.block_6 {
    margin-left: 20rpx;
    width: 520rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
}

.block_7 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    width: 253rpx;
    height: 366rpx;
    margin-bottom: 20rpx;
}

.image-text_3 {
    width: 253rpx;
    height: 347rpx;
}

.group_5 {
    border-radius: 6rpx 0rpx 0rpx 6rpx;
    width: 253rpx;
    height: 252rpx;
}

.group_5_image {
    width: 253rpx;
    height: 252rpx;
}

.text-group_3 {
    margin: 19rpx 0 0 14rpx;
}

.text_13 {
    width: 100%;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text_14 {
    width: 39rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 36rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 18rpx 0 0 28rpx;
}

.text_15 {
    width: 16rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 326rpx 0 0 -236rpx;
}

.label_5 {
    width: 42rpx;
    height: 42rpx;
    margin: 309rpx 15rpx 0 163rpx;
}

.block_8 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    width: 253rpx;
    height: 449rpx;
    margin-top: 10rpx;
}

.image-text_4 {
    width: 253rpx;
    height: 430rpx;
}

.block_9 {
    background-color: rgba(162, 132, 132, 1);
    border-radius: 6rpx 0rpx 0rpx 6rpx;
    width: 253rpx;
    height: 335rpx;
}

.text-group_4 {
    width: 153rpx;
    height: 75rpx;
    margin: 20rpx 0 0 14rpx;
}

.text_16 {
    width: 153rpx;
    height: 29rpx;
    color: rgba(1, 1, 1, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
}

.text_17 {
    width: 38rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 36rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 18rpx 0 0 28rpx;
}

.text_18 {
    width: 16rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 409rpx 0 0 -236rpx;
}

.block_10 {
    background-color: rgba(235, 109, 95, 1);
    border-radius: 50%;
    z-index: 53;
    height: 42rpx;
    width: 42rpx;
    position: relative;
    margin: 392rpx 15rpx 0 163rpx;
}

.block_11 {
    background-color: rgba(255, 255, 255, 1);
    width: 20rpx;
    height: 2rpx;
    margin: 20rpx 0 0 11rpx;
}

.block_12 {
    background-color: rgba(255, 255, 255, 1);
    z-index: 55;
    position: absolute;
    left: 20rpx;
    top: 11rpx;
    width: 2rpx;
    height: 20rpx;
}

.block_13 {
    width: 255rpx;
    height: 920rpx;
    margin-left: 12rpx;
}

.box_6 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    width: 253rpx;
    height: 620rpx;
}

.image-text_5 {
    width: 253rpx;
    height: 600rpx;
}

.box_7 {
    background-color: rgba(162, 132, 132, 1);
    border-radius: 6rpx 0rpx 0rpx 6rpx;
    position: fixed;
    right: 0rpx;
    top: 550rpx;
    z-index: 1000;
}

.text-wrapper_2 {
    box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(51, 51, 51, 0.36);
    background-color: rgba(233, 108, 99, 1);
    border-radius: 6rpx 6rpx 0rpx 0rpx;
    height: 230rpx;
    width: 82rpx;
    padding: 22rpx 26rpx;
}

.paragraph_3 {
    width: 30rpx;
    height: 186rpx;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    text-align: left;
    line-height: 52rpx;
}

.text-group_5 {
    width: 121rpx;
    height: 76rpx;
    margin: 19rpx 0 0 14rpx;
}

.text_19 {
    width: 121rpx;
    height: 30rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
}

.text_20 {
    width: 56rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 36rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 18rpx 0 0 28rpx;
}

.text_21 {
    width: 16rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 579rpx 220rpx 0 -236rpx;
}

.image-wrapper_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    height: 290rpx;
    width: 253rpx;
    margin: 10rpx 0 0 2rpx;
}

.image_2 {
    width: 253rpx;
    height: 290rpx;
}

.image-wrapper_2 {
    box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(51, 51, 51, 0.36);
    background-color: rgba(233, 108, 99, 1);
    border-radius: 6rpx 6rpx 0rpx 0rpx;
    width: 82rpx;
    height: 169rpx;
    position: fixed;
    right: 0rpx;
    top: 800rpx;
    z-index: 1000;
}

.label_6 {
    width: 42rpx;
    height: 38rpx;
    margin: 25rpx 20rpx;
}

.label_7 {
    width: 42rpx;
    height: 38rpx;
    margin: 25rpx 20rpx 0 20rpx;
}

.section_6 {
    background-color: rgba(255, 255, 255, 1);
    z-index: 79;
    position: absolute;
    left: 0;
    top: 1244rpx;
    width: 750rpx;
    height: 90rpx;
}

.text_22 {
    z-index: 82;
    width: 66rpx;
    height: 33rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 29rpx 0 0 92rpx;
}

.box_8 {
    background-color: rgba(234, 150, 149, 1);
    border-radius: 6rpx;
    z-index: 81;
    width: 78rpx;
    height: 12rpx;
    margin: -9rpx 0 25rpx 86rpx;
}

.text-wrapper_3 {
    z-index: 80;
    position: absolute;
    left: 250rpx;
    top: -1rpx;
    width: 500rpx;
    height: 91rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps6lpsjwwmt1jqtmoryu2sd9jq3zhs7jwaeb2311fe-fd00-42d8-9bd7-3dc6c87ba56e)
        100% no-repeat;
    background-size: 100% 100%;
}

.text_23 {
    width: 97rpx;
    height: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 34rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 30rpx 0 0 76rpx;
}

.text_24 {
    width: 132rpx;
    height: 33rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 34rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 30rpx 60rpx 0 135rpx;
}

.block_empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addbox {
    width: 750rpx;
    max-height: 890rpx;
    padding: 20rpx 0rpx 40rpx 40rpx;

    .info {
        width: 100%;
        display: flex;

        .le {
            width: 205rpx;
            height: 140rpx;
            border-radius: 8rpx;

            .leimg {
                width: 100%;
                height: 100%;
                border-radius: 8rpx;
            }
        }

        .ri {
            flex: 1;
            margin-left: 24rpx;
            height: 140rpx;

            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            .name {
                width: 100%;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
                margin-top: 20rpx;
            }

            .price {
                font-size: 40rpx;
                font-family: SF UI Text;
                font-weight: bold;
                color: #e86c64;
                margin-top: 38rpx;

                .price-c {
                    font-size: 32rpx;
                }
            }
        }
    }

    .names {
        margin-top: 30rpx;

        .names-title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin: 40rpx 0rpx 20rpx 0;
        }

        .names-item-box {
            display: flex;

            .names-item {
                height: 56rpx;
                border-radius: 12rpx;
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                border: 1rpx solid #333333;
                padding: 10rpx 22rpx;
                margin-right: 20rpx;
            }

            .names-item-act {
                background: #fa625d;
                color: #fff;
                border: none;
            }
        }
    }

    .ops-box {
        height: 130rpx;
        display: flex;
        align-items: center;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        margin-top: 34rpx;

        .ops-title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        .ops-number {
            margin-left: 38rpx;
        }
    }

    .btns {
        display: flex;
        margin-top: 125rpx;

        .btn {
            width: 585rpx;
            height: 75rpx;
            background: #fa625d;
            border-radius: 38rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .close {
            margin-left: 26rpx;
            height: 75rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.getpage {
    height: 100vh;
    width: 750rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title1 {
        width: 100%;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        text-align: center;
    }

    .title2 {
        margin-top: 30rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 300;
        color: #666666;
        text-align: center;
    }

    .button_info {
        width: 310rpx;
        height: 76rpx;
        background: #f9625d;
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 70rpx;

        .text {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-left: 14rpx;
        }
    }
}
.infoBox {
    height: 760rpx;
    width: 750rpx;
    background: white;
    position: absolute;
    top: 0px;
    z-index: 1000;
    // left: -345rpx;
    .tabs {
        width: 100%;
        background: #fff;
        box-shadow: 0px 2rpx 6rpx 0px rgba(51, 51, 51, 0.18);
    }
    .content {
        height: 650rpx;
        overflow-y: auto;
        width: 100%;
        .content-c {
            padding: 40rpx 48rpx;
            .sinfo {
                .t {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                }
                .c {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    margin-left: 14rpx;
                }
            }
            .coupons-title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
            }
            .coupons-list {
                width: 670rpx;
                min-height: 335rpx;
                background: #ffffff;
                box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(51, 51, 51, 0.12);
                border-radius: 12rpx;
                padding: 20rpx 22rpx;
                margin-top: 24rpx;
                .coupons-list-t {
                    height: 226rpx;
                    display: flex;
                    width: 100%;
                    .left {
                        height: 100%;
                        width: 120rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-right: 2rpx dotted #ededed;
                        .fu {
                            font-size: 32rpx;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #e86c64;
                        }
                        .am {
                            font-size: 62rpx;
                            font-family: SF UI Text;
                            font-weight: 600;
                            color: #e86c64;
                        }
                    }
                    .right {
                        height: 100%;
                        width: 500rpx;
                        margin-left: 20rpx;
                        .right-t {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            .fac {
                                font-size: 32rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #333333;
                            }
                            .linq {
                                width: 124rpx;
                                height: 52rpx;
                                background: #fb645d;
                                border-radius: 26rpx;
                                font-size: 24rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #ffffff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        .right-m {
                            margin-top: 28rpx;
                            margin-bottom: 29rpx;
                            .mk {
                                font-size: 30rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #999999;
                            }
                            .ky {
                                font-size: 30rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #333333;
                            }
                            .am {
                                font-size: 36rpx;
                                font-family: SF UI Text;
                                font-weight: 600;
                                color: #e86c64;
                            }
                        }
                        .right-b {
                            display: flex;
                            align-items: center;
                            .yxxq {
                                font-size: 30rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #999999;
                            }
                            .date {
                                margin-left: 64rpx;
                                font-size: 30rpx;
                                font-family: SF UI Text;
                                font-weight: 400;
                                color: #333333;
                            }
                        }
                    }
                }
                .coupons-list-b {
                    width: 100%;
                    height: 50rpx;
                    background: #f6f7fb;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 20rpx;
                    .gc {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #666666;
                    }
                }
                .guz{
                  padding-top: 40rpx;
                  width: 100%;
                  border-top: 2rpx dotted #EDEDED;
                  margin-top: 10rpx;
                  .gzitem{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .gzitem-t{
                      font-size: 30rpx;
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: #999999;
                    }
                    .gzitem-c{
                      font-size: 30rpx;
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: #333333;
                      margin-left: 54rpx;
                    }
                  }
                }
            }
            .ch {
                margin-top: 20rpx;
                border-top: 2rpx dotted #ededed;
                padding-top: 44rpx;
                .titleee {
                    display: flex;
                    justify-content: space-between;
                    .titleee-t {
                        font-size: 32rpx;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: #333333;
                    }
                    .chbtn {
                        width: 124rpx;
                        height: 52rpx;
                        background: #fb645d;
                        border-radius: 26rpx;
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                 .tag {
                      width: 242rpx;
                      height: 64rpx;
                      border: 2rpx solid rgba(153, 153, 153, 0.3);
                      border-radius: 10rpx;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      .tag-l{
                        font-size: 34rpx;
                        font-family: SF UI Text;
                        font-weight: 600;
                        color: #333333;
                      }
                      .tag-r{
                        width: 120rpx;
                        height: 54rpx;
                        background: #FB645D;
                        border-radius: 8rpx;
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      }
                }
            }
        }
        .content-cq{
          width: 100%;
          .imgsss{
            width: 456rpx;
            height: 375rpx;
            margin: 110rpx auto 0;
          }      
          .qdaitext{
            width: 100%;
            text-align: center;
            margin-top: 10rpx;
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
          }    
        }
    }
    .bottom {
        height: 20rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .black {
            background-color: rgba(222, 225, 234, 1);
            border-radius: 4rpx;
            z-index: 12;
            width: 60rpx;
            height: 8rpx;
        }
    }
}
</style>
